
import React from 'react';
import { Carousel,Flex } from 'antd-mobile';
import { startWith } from '../../utils/httputil';
import Img from '../../routes/Study/img/banner.png';

import styles from './index.less';

const empty = require('is-empty');
class CarouselItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // data: [{img:banner1, title: '聚焦总目标 喜迎十九大'}, {img:banner2, title: '聚焦总目标 喜迎十九大'}, {img:banner3, title: '聚焦总目标 喜迎十九大'}],
      carouselNumber1: 1,
      initialCarouselHeight1: '0rem',
      carouselNumber2: 1,
      initialCarouselHeight2: '0rem',
    };
  }


  render() {
    const {imgsData,}=this.props;

    return (
      <div style={{height: `${this.state.initialCarouselHeight1}`, backgroundColor: '#fff' }}>
        <Carousel
          className={styles.myCarousel}
          autoplay={true}
          infinite={true}
          selectedIndex={0}
          swipeSpeed={35}
          dots={false}
          afterChange={index => {this.setState({carouselNumber1: index+1})}}>
          {imgsData.map((ii,jj) => (
            <a key={jj} className={styles.myCarouselA}>
              <img
                className={styles.myCarouselAImg}
                src={ii.img}
                onLoad={() => {
                  window.dispatchEvent(new Event('resize'));
                  this.setState({
                    initialCarouselHeight1: '4rem'
                  });
                }}
              />
              <Flex justify='between' align='center' className={styles.myCarouselAShadow}>
                <div style={{marginLeft: '0.3rem',fontSize: '0.26rem'}}>{ii.title}</div>
                <div style={{marginRight: '0.3rem',fontSize: '0.2rem'}}>
                  <span style={{fontSize: '0.38rem'}}>{this.state.carouselNumber1}</span>
                  /3
                </div>
              </Flex>
            </a>
          ))}
        </Carousel>
      </div>
    )
  }
}

export default CarouselItem;
